<template>
 <div class="projectmanagepanel">
  	<el-row :gutter="20">
  	 <el-col :span="6">
  	 	<span class="span-label">
  	 		活动起止日期：
  	 	</span>
  	 </el-col>
  	 <el-col :span="18">
  	 	 <div class="datechoosepanel">
    <el-date-picker
      v-model="activity_datescope"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期" @change="changeActivityDateScope" value-format="yyyy-MM-dd HH:mm:ss">
    </el-date-picker>
  	 	 </div>
  	 </el-col>
  	</el-row>
  	<div class="row_split_divider"></div>
  	<el-row :gutter="20">
  	 <el-col :span="6">
  	 	<span class="span-label">
  	 		活动行业类别：
  	 	</span>
  	 </el-col>
  	 <el-col :span="18">
  	 	 <div class="classtypechoosepanel">
  	 	 	<div>
  	 	 		<el-select v-model="belongIndustry" @change="changeBelongIndustry" placeholder="选择行业">
  	 	 			<el-option v-for="(itm,idx) in belongIndustryList" 
  	 	 				:label="itm.label" 
  	 	 				:value="itm.value"
  	 	 				:key="itm.value">
  	 	 			</el-option>
  	 	 		</el-select>
  	 	 	</div>
  	 	 	<div style="margin-left: 10px;">
  	 	 		<el-select v-model="belongClassType" @change="changeBelongClassType" placeholder="选择类别">
  	 	 			<el-option v-for="(itm,idx) in belongClassTypeList" 
  	 	 				:label="itm.label" 
  	 	 				:value="itm.value"
  	 	 				:key="itm.value">
  	 	 			</el-option>
  	 	 		</el-select>
  	 	 	</div>
  	 	 </div>
  	 </el-col>
  	</el-row>
  	<div class="row_split_divider"></div>
  	<el-row :gutter="20">
  	 <el-col :span="6">
  	 	<span class="span-label">
  	 		活动层级：
  	 	</span>
  	 </el-col>
  	 <el-col :span="18">
  	 	 <div class="levelchoosepanel">
  	 	 	是否设定？<el-radio-group v-model="activity_level_confirm" @change="changeActivityLevelConfirm">
  	 	 		<el-radio label="no" key="no">否</el-radio>
  	 	 		<el-radio label="yes" key="yes">是</el-radio>
  	 	 	</el-radio-group>
  	 	 	<div style="margin-left:10px;" v-if="activity_level_confirm=='yes'">
  	 	 		<el-select v-model="activity_level" @change="changeActivityLevel">
  	 	 			<el-option v-for="(itm,idx) in activity_level_list"
  	 	 				:key="itm.value"
  	 	 				:label="itm.value"
  	 	 				:value="itm.value">{{itm.label}}</el-option>
  	 	 		</el-select>
  	 	 	</div>
  	 	 </div>
  	 </el-col>
  	</el-row>
 </div>
</template>

<script>
	export default{
		data(){
			return {
				activity_datescope:[],
				activity_level_confirm:null,
				activity_level:null,
				activity_level_list:[
				{label:"国家",value:"国家"},
				{label:"省部",value:"省部"},
				{label:"地市",value:"地市"},
				{label:"区县",value:"区县"},
				{label:"院校",value:"院校"},
				],
				belongIndustry:null,
				belongIndustryList:[
				{label:"基础教育",value:"基础教育"},
				{label:"职业教育",value:"职业教育"},
				{label:"政府部门",value:"政府部门"},
				],
				belongClassType:null,
				belongClassTypeList:[
				{label:"论文",value:"论文"},
				{label:"案例",value:"案例"},
				{label:"科技创新",value:"科技创新"},
				{label:"书法",value:"书法"},
				{label:"作文",value:"作文"},
				{label:"著作",value:"著作"},
				{label:"美术",value:"美术"},
				{label:"乐器",value:"乐器"},
				{label:"摄影",value:"摄影"},
				]
			}
		},
		methods:{
			changeActivityDateScope(v){
				console.log(v);
			},
			changeBelongIndustry(v){
				console.log(v);
			},
			changeBelongClassType(v){
				console.log(v);
			},
			changeActivityLevel(v){
				console.log("v=",v);
				console.log("this.activity_level=",this.activity_level)
			},
			changeActivityLevelConfirm(v){
				if(v=="no"){
					this.activity_level=null
				}
				console.log("this.activity_level=",this.activity_level)
			}
		}
	}
</script>

<style>
	.row_split_divider{
		margin:10px auto;
	}
	.span-label{
		font-size: 12pt;
		font-weight: bold;
	}
	.datechoosepanel{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.classtypechoosepanel{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.levelchoosepanel{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
</style>